$app.open();
$ui.render({
  props: { title: "剪切板编辑" },
  views: [
    {
      type: "text",
      props: { id: "displayer" },
      layout: function (make, view) {
        make.top.equalTo(0);
        make.width.equalTo(view.super.width);
        make.height.equalTo(165);
      },
      events: {
        ready: function (sender) {
          sender.text = $clipboard.text ? $clipboard.text : "";
          sender.focus();
        },
        doubleTapped: function (sender) {
          sender.blur();
        }
      }
    },
    {
      type: "label",
      props: { id: "lblFind", text: "查找", align: $align.left },
      layout: function (make, view) {
        make.left.inset(10);
        make.top.equalTo($("displayer").bottom).offset(10);
        make.size.equalTo($size(100, 25));
      }
    },
    {
      type: "input",
      props: { id: "txtPattern", type: $kbType.default, placeholder: "Input Regex pattern for search" },
      layout: function (make, view) {
        make.left.equalTo($("lblFind").right).offset(10);
        // make.top.offset(10)
        make.top.equalTo($("displayer").bottom).offset(10);
        make.height.equalTo(25);
        make.right.equalTo(view.super).offset(-10);
      },
      events: {
        changed: function (sender) {},
        returned: function (sender) {
          sender.blur();
        }
      }
    },
    {
      type: "label",
      props: { id: "lblReplaceTo", text: "替换", align: $align.left },
      layout: function (make, view) {
        make.left.offset(10);
        make.top.equalTo($("lblFind").bottom).offset(10);
        make.size.equalTo($size(100, 25));
      }
    },
    {
      type: "input",
      props: { id: "txtReplaceTo", type: $kbType.default, placeholder: "Input text to replace to" },
      layout: function (make, view) {
        make.left.equalTo($("lblReplaceTo").right).offset(10);
        make.top.equalTo($("lblReplaceTo").top);
        make.height.equalTo(25);
        make.right.equalTo(view.super).offset(-10);
      },
      events: {
        changed: function (sender) {},
        returned: function (sender) {
          sender.blur();
        }
      }
    },
    {
      type: "label",
      props: { id: "lblIgnoreCase", text: "忽略大小写", align: $align.left },
      layout: function (make, view) {
        make.left.offset(10);
        make.top.equalTo($("lblReplaceTo").bottom).offset(10);
        make.size.equalTo($size(100, 25));
      }
    },
    {
      type: "switch",
      props: { id: "swchIgnoreCase" },
      layout: function (make, view) {
        make.right.equalTo(view.super).offset(-10);
        make.top.equalTo($("lblIgnoreCase").top);
        make.height.equalTo(25);
      },
      events: {
        changed: function (sender) {}
      }
    },
    {
      type: "label",
      props: { id: "lblWholeWords", text: "完整词", align: $align.left },
      layout: function (make, view) {
        make.left.offset(10);
        make.top.equalTo($("lblIgnoreCase").bottom).offset(10);
        make.size.equalTo($size(100, 25));
      }
    },
    {
      type: "switch",
      props: { id: "swchWholeWords" },
      layout: function (make, view) {
        make.right.equalTo(view.super).offset(-10);
        make.top.equalTo($("lblWholeWords").top);
        make.height.equalTo(25);
      },
      events: {
        changed: function (sender) {}
      }
    },
    {
      type: "label",
      props: { id: "lblMultiLines", text: "多行", align: $align.left },
      layout: function (make, view) {
        make.left.offset(10);
        make.top.equalTo($("lblWholeWords").bottom).offset(10);
        make.size.equalTo($size(100, 25));
      }
    },
    {
      type: "switch",
      props: { id: "swchMultiLines" },
      layout: function (make, view) {
        make.right.equalTo(view.super).offset(-10);
        make.top.equalTo($("lblMultiLines").top);
        make.height.equalTo(25);
      },
      events: {
        changed: function (sender) {}
      }
    },
    {
      type: "label",
      props: { id: "lblRegexp", text: "正则", align: $align.left },
      layout: function (make, view) {
        make.left.offset(10);
        make.top.equalTo($("lblMultiLines").bottom).offset(10);
        make.size.equalTo($size(100, 25));
      }
    },
    {
      type: "switch",
      props: { id: "swchRegexp" },
      layout: function (make, view) {
        make.right.equalTo(view.super).offset(-10);
        make.top.equalTo($("lblRegexp").top);
        make.height.equalTo(25);
      },
      events: {
        changed: function (sender) {}
      }
    },
    {
      type: "button",
      props: { title: "查找", id: "findButton" },
      layout: function (make, view) {
        // make.left.offset(10);
        //   make.centerX.equalTo()
        make.left.offset(20);
        make.top.equalTo($("lblRegexp").bottom).offset(20);

        //   make.top.equalTo($("replaceButton").top)
        // make.size.equalTo($size(100, 25))
        make.width.equalTo(70);
      },
      events: {
        tapped: function (sender) {
          // $ui.toast("已替换");
          var pattern = $("txtPattern").text;
          if (!$("swchRegexp").on) {
            pattern = pattern
              .replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&")
              .replace(" ", "\\s");
          }
          if ($("swchWholeWords").on) {
            pattern = "\\b" + pattern + "\\b";
          }
          var reg = new RegExp(
            pattern,
            ($("swchIgnoreCase").on ? "i" : "") +
              ($("swchMultiLines").on ? "m" : "") +
              "g"
          );
          // $("displayer").text = $clipboard.text.replace(reg, $("txtReplaceTo").text)
          $("displayer").text = $("displayer").text.replace(reg, "---@$&@---");
        }
      }
    },
    {
      type: "button",
      props: { title: "替换", id: "replaceButton" },
      layout: function (make, view) {
        // make.centerX.equalTo()
        make.left.equalTo($("findButton").right).offset(10);
        make.top.equalTo($("findButton").top);
        // make.size.equalTo($size(100, 25))
        make.width.equalTo(70);
      },
      events: {
        tapped: function (sender) {
          $ui.toast("已替换");
          var pattern = $("txtPattern").text;
          if (!$("swchRegexp").on) {
            pattern = pattern
              .replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&")
              .replace(" ", "\\s");
          }
          if ($("swchWholeWords").on) {
            pattern = "\\b" + pattern + "\\b";
          }
          var reg = new RegExp(
            pattern,
            ($("swchIgnoreCase").on ? "i" : "") +
              ($("swchMultiLines").on ? "m" : "") +
              "g"
          );
          $("displayer").text = $("displayer").text.replace(
            reg,
            $("txtReplaceTo").text
          );
        }
      }
    },
    {
      type: "button",
      props: { id: "saveButton", title: "保存到剪切板" },
      layout: function (make, view) {
        make.top.equalTo($("findButton").top);
        make.left.equalTo($("replaceButton").right).offset(10);
        //   make.centerX.equalTo(view.super)
        make.width.equalTo(120);
      },
      events: {
        tapped: function (sender) {
          $clipboard.text = $("displayer").text;
          $ui.toast("已保存");
        }
      }
    },
    {
      type: "button",
      props: { id: "taobaoButton", title: "淘宝" },
      layout: function (make, view) {
        make.top.equalTo($("findButton").top);
        make.left.equalTo($("saveButton").right).offset(10);
        //   make.centerX.equalTo(view.super)
        make.width.equalTo(70);
      },
      events: {
        tapped: function (sender) {
          $clipboard.text = $("displayer").text;
          $app.openURL(
            "taobao://s.taobao.com/?q=" + encodeURI($("displayer").text)
          );
        }
      }
    }
  ]
});
